import React, {
    PureComponent
} from 'react';

import {
    View,
    Text,
    StyleSheet
} from 'react-native';

const maxDate = (() => {
    const time = Date.now() - 1000 * 60 * 60 * 24 * 30 * 12 * 19;
    return new Date(time);
})();

import * as Const from "../../const";

import Press from './../Press';

import DatePicker from '@react-native-community/datetimepicker';

interface Props {
    value:any,
    onDialogClose:Function,
    onDone:Function
}

interface State {
    date:any
}

class Modal extends PureComponent<Props,State> {

    constructor(props:Props) {
        super(props);
        this.state = {
            date:props.value
        }
    }

    static defaultProps = {
        onDone:() => null,
        onDialogClose:() => null
    }

    private onDateChange = ({nativeEvent}:any) => {
        const {
            timestamp
        } = nativeEvent;
        this.setState({
            date:new Date(timestamp)
        })
    }

    private onClose = () => {
        const {
            onDialogClose
        } = this.props;
        onDialogClose()
    }

    private onConfirm = () => {
        const {
            date
        } = this.state;
        const {
            onDone
        } = this.props;
        onDone(date);
        this.onClose();
    }

    render() {
        const {
            date
        } = this.state;
        return (
            <View style={styles.container}>
                <View style={styles.header}>
                    <Press style={styles.button} onPress={this.onClose}>
                        <Text style={styles.cancel}>
                            Cancel
                        </Text>
                    </Press>
                    <Press style={styles.button} onPress={this.onConfirm}>
                        <Text style={styles.done}>
                            Done
                        </Text>
                    </Press>
                </View>
                <View style={styles.content}>
                    <DatePicker
                        value={date}
                        maximumDate={maxDate}
                        textColor={Const.color}
                        onChange={this.onDateChange}
                    />
                </View>
            </View>
        )
    }
}

export default Modal;

const styles = StyleSheet.create({
    container:{
        backgroundColor:`#fff`
    },
    header:{
        height:48,
        borderColor:`#ececec`,
        borderBottomWidth:1,
        flexDirection:`row`,
        paddingHorizontal:16,
        justifyContent:`space-between`
    },
    content:{
        backgroundColor:`#f9f9f9`
    },
    button:{
        height:`100%`,
        justifyContent:`center`
    },
    cancel:{
        color:`#666`,
        fontSize:14
    },
    done:{
        fontSize:14,
        color:Const.color
    }
}) as any;